<template>
  <view>
    <view class="u-page">
      <view class="commongap _10 white"></view>
      <view class="top">
        <!-- 轮播图 -->
        <view class="banner">
          <u-swiper indicator indicatorMode="dot" radius="0" :list="topAds" height="280rpx" imgMode="widthFix" ></u-swiper>
        </view>
      </view>
      
      <view class="menuButtons">
        <view class="item" v-for="(item, index) in menuList" :key="index"
            @click="handleMenuButtonClick(item)"        
            :style="'background: ' + item.color">
            <image :src="getFmtImage(item.img)" mode=""></image>
            <view class="righLen">
                <view class="len">{{item.name}}</view>
                <view class="len2">{{item.subTitle}}</view>
            </view>
            <view class="right">
                <u-icon name="arrow-right" color="#c1c1c1" size="26"></u-icon>
            </view>
        </view>
      </view>
      
    </view>
    <mytabbar v-if="characterType"></mytabbar>
  </view>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import sceneMixins from "@/utils/sceneMixins";
import mytabbar from "@/components/tabbar/index.vue";
export default {
  options: { styleIsolation: "shared" },
  components: { mytabbar: mytabbar },
  mixins: [sceneMixins],
  computed: {
    ...mapState(["userInfo", "openId", "token", "characterType"]),
  },
  data() {
    return {
      topAds: [],
      menuList: []
    };
  },

  methods: {
    ...mapMutations(["changeTab", "changeCharacterType"]),
    handleMenuButtonClick: function (eventHandler) {
      if (eventHandler.pemissionControl) {
        var pc = eventHandler.pemissionControl;
        var judge = this.userInfo && pc[1].includes(this.userInfo[pc[0]]);
        if (!judge) {
          uni.showModal({
            title: "提示",
            content: eventHandler.failMsg || "该功能未暂未开放/或您无权限使用",
            showCancel: false,
          });
          return;
        }
      }

      if (eventHandler.type === "switchTab") {
        this.changeTab(eventHandler.tabIndex);
        uni.switchTab({
          url: eventHandler.url,
        });
      } else if (eventHandler.url) {
        uni.navigateTo({
          url: eventHandler.url,
        });
      } else if (eventHandler.h5) {
       this.gotoH5Page(eventHandler.h5);
       }
    },
  },
  onShow() {
    var vm = this;
    vm.waitVariable("token").then(() => {
      if (vm.userInfo) {
        var characterType = vm.userInfo.characterType;
        vm.changeCharacterType(characterType);
        if (characterType == 1) {
          vm.getAndLoad('首页', vm.WX_ASSETS + '/wxJSON/首页配置/教师.json', function (data) {
              vm.topAds = data.topAds.map(n => vm.getFmtImage(n));
              vm.menuList = data.menuList;
          })
        } else {
          vm.getAndLoad('首页', vm.WX_ASSETS + '/wxJSON/首页配置/学生.json', function (data) {
              vm.topAds = data.topAds.map(n => vm.getFmtImage(n));
              vm.menuList = data.menuList;
          })
        }
      } else {
        uni.redirectTo({url: '/pages/mine/login'});
      }      
    })
  },
  onLoad(options) {
  },
};
</script>

<style lang="scss" scoped>
.u-page {
  height: 100vh;
  overflow: hidden;
  background: #fff;
}
.top {
  width: 100vw;
  height: 280rpx;
  background-color: #ffffff;
  .banner {
    width: 100vw;
    margin: 0 auto;
    margin-top: -20rpx;
    /deep/ {
      .u-swiper {
        background-color: #ffffff !important;
      }
    }
  }
}
.menuButtons {
    .item {
        display: flex;
        margin: 20rpx 40rpx;
        border-radius: 10rpx;
        padding: 20rpx;
        align-items: center;
        image {
            width: 96rpx;
            height: 96rpx;
        }
        .righLen {
            margin: 0 20rpx;
            font-size: 32rpx;
            .len {
                // font-weight: bold;
                margin-bottom: 6rpx;
            }
            .len2 {
                color: #C0C1C1;
                font-size: 24rpx;
            }
        }
        .right {
            margin-left: auto;
        }
    }
}

</style>
